/<template>
  <div class="shou">
    <header>
      <span>上海</span>
      <input type="text" placeholder="输入商户名、地点或菜品" />
    </header>
    <main>
      <Banner></Banner>
      <Classfy></Classfy>
      <GoodList></GoodList>
      <Nav></Nav>
    </main>
  </div>
</template>

<script>
import Banner from "../../components/Banner.vue";
import Classfy from "../../components/Classfy.vue";
import GoodList from "../../components/GoodList.vue";
import Nav from "../../components/Nav.vue";
export default {
  components: {
    Banner,
    Classfy,
    GoodList,
    Nav,
  },
  data() {
    return {};
  },
};
</script>

<style lang="scss">
*{
  margin: 0;
  padding: 0;
  list-style: none;
  box-sizing: border-box;
}
html,body,.shou{
  width: 100%;
  height: 100%;
}
.shou {
  display: flex;
  flex-direction: column;
  header {
    width: 100%;
    height: 50px;
    background-color: antiquewhite;
    display: flex;
    align-items: center;
    span {
      margin-left: 20px;
    }
    input {
      margin-left: 50px;
    }
  }
  main{
    flex: 1;
    overflow-y: scroll;
  }
}
</style>